<template>
	<view class="cp-item-box" @click="toDetail">
		<w-image :src="product.listimg" :width="540 / 2" :height="540 / 2"></w-image>
		<view class="sale-box flex flex-ai-center">
			<w-icon :name="saleStatusIcon[saleStatus]" size="16"></w-icon>
			<view class="flex flex-ai-center font-size-10 font-color-white" v-if="saleStatus==1">
				<text class="mlr-4">倒计时</text>
				<u-count-down :time="countDown" format="HH:mm:ss"></u-count-down>
			</view>
			<view class=" font-size-10 font-color-white ml-4" v-if="saleStatus==2">热卖中</view>
			<view class=" font-size-10 font-color-white ml-4" v-if="saleStatus==4">已售罄</view>
		</view>
		<view class="price-sale-box">
			<view class="font-size-16 font-w-500 font-color-white text-overflow">{{ product.name }}</view>
			<view class="flex-center-sb">
				<w-tag name="限量" :value="`${product.total_num}份`"></w-tag>
				<view class="price font-size-22 font-color-price" style="color: #fff	;">￥{{ product.price }}</view>
			</view>
		</view>
	</view>
<!-- 	<view class="n-item-con" @click="toDetail">
		<view class="swiper-item" v-if="type==1">
			<view class="imgCon">
				<w-image :src="product.listimg" width="190" height="190"></w-image>
				<view class="sale-status">
					<w-icon :name="saleStatusIcon[saleStatus]" size="16"></w-icon>
					<view class="flex flex-ai-center font-size-10 font-color-white" v-if="saleStatus==1">
						<text class="mlr-4">倒计时</text>
						<u-count-down :time="countDown" format="HH:mm:ss"></u-count-down>
					</view>
					<view class=" font-size-10 font-color-white ml-4" v-if="saleStatus==2">热卖中</view>
					<view class=" font-size-10 font-color-white ml-4" v-if="saleStatus==4">已售罄</view>
				</view>
				<view class="publisher">
					<view class="bg">{{ product.publisher.name }}</view>
				</view>
			</view>
			<view class="nameCon">
				<view class="font-size-15 font-w-500 font-color-white text-overflow">{{ product.name }}</view>
				<view class="flex-center-sb">
					<w-tag name="限量" size="mini" :value="`${product.total_num}份`"></w-tag>
					<view class="price font-size-18 font-color-price" style="color: #F53F3F;">￥{{ product.price }}</view>
				</view>
			</view>
		</view>
		
		<view class="swiper-item-one" v-else>
			<view class="imgCon">
				<image :src="$ossUrl+product.listimg" mode="widthFix"></image>
				<view class="sale-status">
					<w-icon :name="saleStatusIcon[saleStatus]" size="18"></w-icon>
					<view class="flex flex-ai-center font-size-12 font-color-white" v-if="saleStatus==1">
						<text class="mlr-4">倒计时</text>
						<u-count-down :time="countDown" format="HH:mm:ss"></u-count-down>
					</view>
					<view class=" font-size-12 font-color-white ml-4" v-if="saleStatus==2">热卖中</view>
					<view class=" font-size-12 font-color-white ml-4" v-if="saleStatus==4">已售罄</view>
				</view>
				<view class="publisher">
					<view class="bg">{{ product.publisher.name }}</view>
				</view>
			</view>
			<view class="nameCon">
				<view class="font-size-16 font-w-500 font-color-dark text-overflow">{{ product.name }}</view>
				<view class="flex-center-sb">
					<w-tag name="限量" :value="`${product.total_num}份`"></w-tag>
					<view class="price font-size-22 font-color-price" style="color: #F53F3F;">{{ product.price }}</view>
				</view>
			</view>
		</view>
	</view> -->
</template>

<script>
	import productMixin from "@/mixins/product.js"
	export default {
		mixins: [productMixin],
		props:{
			type:Number,
			product: {
				type: Object,
				default () {
					return {
						listimg: '',
						id: 1,
						batch: {
							total_num: 0,
							sale_total_num: 0,
							has_num: 0,
							start_time: 0,
							end_time: 0,
						},
						price: "0",
						main_img: '',
						goods_type: 1, //1盲盒，2藏品
						name: "",
						end_time: 0,
						release_time: 0,
						total_num: 0,
						sale_total_num: 0,
						publisher: {
							avatar: '',
							name: ""
						}
					}
				}
			}
		},
		data() {
			return {
				saleStatusIcon: {
					1: "clock",
					2: "hot",
					3: "",
					4: "sale-done"
				}
			};
		},
		methods:{
			toDetail() {
				let item = this.product;
				if (item.goods_type != 1) {
					this.$u.route('/pages/product/collection', { id: item.id,batch_id: item.batch_id })
				}else{
					this.$u.route('/pages/product/box', { id: item.id })
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cp-item-box {
		width:540rpx;
		height: 100%;
		border-radius: 56rpx;
		.sale-box {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
			width: 136rpx;
			height: 52rpx;
			background: rgba(0,0,0,0.3);
			border-radius: 40rpx;
			padding: 8rpx 16rpx;
			/deep/ .u-count-down__text {
				@extend .font-color-white,
				.font-size-10;
				line-height: 0;
			}
		}
		.price-sale-box {
			position: absolute;
			left: 24rpx;
			bottom: 24rpx;
			width: 492rpx;
			height: 132rpx;
			background: rgba(0,0,0,0.3);
			border-radius: 64rpx 64rpx 64rpx 64rpx;
			padding: 16rpx 40rpx;
			box-sizing: border-box;
		}
	}
	.n-item-con{
		width: 100%;
		height: 100%;
	
		.logTitle{
			width: 192rpx;
			height: 44rpx;
			background-image: url('@/static/bg/card-title.png');
			background-size: 100% 100%;
			display: flex;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
		}
		.price{
			font-weight: 500;
			color: #222;
			&::before{
				content: '￥';
				font-size: 24rpx;
				color: #222;
			}
		}
		.swiper-item{
			width: 380rpx;
			height: 100%;
			background-color: #252525;
			border-top-left-radius: 24rpx;
			>.imgCon{
				width: 380rpx;
				height: 380rpx;
				overflow: hidden;
				border-top-left-radius: 24rpx;
				border: 2rpx solid rgba(141, 92, 51, 1);
				position: relative;
			}
			>.nameCon{
				width: 100%;
				height: calc(100% - 380rpx);
				padding: 0 24rpx;
				@extend .flex,.flex-dir-col,.flex-js-center,.gap-8;
			}
		}
		
		.swiper-item-one{
			width: calc(100% - 24rpx);
			height: auto;
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			
			>.imgCon{
				width: 100%;
				min-height: 300rpx;
				position: relative;
				>image{
					width: 100%;
					height: 300rpx;
					display: block;
				}
			}
			>.nameCon{
				width: 100%;
				height: 160rpx;
				padding: 0 24rpx;
				@extend .flex,.flex-dir-col,.flex-js-center,.gap-8;
			}
		}
		
		.sale-status {
			position: absolute;
			right: 0;
			z-index: 1;
			top: 0;
			@extend .plr-16,
			.ptb-8,
			.flex,
			.flex-ai-center;
			border-radius: 0 0 0rpx 24rpx;
		
			/deep/ .u-count-down__text {
				@extend .font-color-white,
				.font-size-10;
				line-height: 0;
			}
		}
		.publisher {
			position: absolute;
			left: 16rpx;
			top: 16rpx;
			.bg {
				width: 192rpx;
				height: 44rpx;
				background-image: url($IMG_URL + '/static/bg/publisher.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				line-height: 44rpx;
				color: #fff;
				padding-left: 54rpx;
				font-size: 24rpx;
			}
		}
		
		.sale-status::before {
			content: '';
			border-radius:  0 0 0rpx 24rpx;
			z-index: -1;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.2);
			backdrop-filter: blur(10px);
		}
	}
</style>
